

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">Count组件求和为:{{sum}}</h3>
    <input type="text" placeholder="请输入名字" v-model="name"/>
    <button @click="add">添加</button>
    <ul >
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>

  </div>


</template>

<script>
import {nanoid}from 'nanoid'
export default {
  name: 'Person',
  data:function (){
    return {
      name:''
    }
  },
  computed:{
    personList:function (){
      return this.$store.state.personList
    },
    sum:function (){
      return this.$store.state.sum
    },
  },
  methods:{

    add:function (){
      const personObj ={id:nanoid(),name:this.name}
      this.$store.commit('ADDPERSON', personObj)
      this.name =''

    }
  }


}
</script>
<style scoped>

</style>